@import "variables.less";

/* =========== element 组件 自定义 =========== */

.el-loading-mask {
  z-index: 3000 !important;
}

.el-notification {
  //z-index: 2001 !important;
}

/*禁用 collapse 折叠动画，减小性能开销*/
.collapse-transition {
  transition: none !important;
}

/*文本框、多行文本框、多选框文本框、dialog、按钮样式修改为圆角*/
.el-textarea__inner, .el-checkbox.is-bordered,
.el-input__inner, .el-dialog, .el-drawer, .el-button,
.el-input-number, .el-radio-group, .el-cascader__dropdown {
  border-radius: @borderRadiusMain !important;
}

/*el-header 高度 颜色*/
.el-header {
  line-height: 60px;
  height: 60px !important;
  font-size: @sizeMain;
  color: white;
}

/*el-aside 字体颜色*/
.el-aside {
  color: @colorGray20;
}

.el-menu {
  border: none !important;
  background: @colorWhite !important;
  -moz-user-select: none !important;
  -webkit-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;

  .el-submenu__title {
    padding-left: 25px !important;
    height: 46px;
    line-height: 46px;
    color: @colorGray10 !important;
    position: relative;

    i {
      color: @colorGray10;
    }

    .el-submenu__icon-arrow {
      display: none;
    }
  }

  .submenu-collapse-icon {
    position: absolute;
    right: 20px;
    font-size: @sizeSecond;
    color: @colorGray60 !important;
  }

  .el-menu-item {
    height: 46px !important;
    line-height: 46px !important;
    color: @colorGray10 !important;

    i {
      color: @colorGray10 !important;
    }

    a {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding-left: 55px;
      text-decoration: none;
      color: @colorGray10 !important;
    }
  }

  .active-menu-item, .el-menu-item .is-active, .el-menu-item:focus {
    background: @colorPrimaryAlpha1;
    color: @colorPrimary !important;
    font-weight: bold;
    box-shadow: 2px 0 0 0 @colorPrimary inset;

    a {
      color: @colorPrimary !important;
    }
  }

  .el-menu-item:hover, .el-submenu__title:hover {
    background: @colorPrimaryAlpha1;
    box-shadow: 2px 0 0 0 @colorPrimary inset;
  }
}

.el-menu--popup {
  background-color: @colorWhite !important;
  border: 1px solid @colorBlackAlpha1 !important;
  box-shadow: 0 6px 10px 0 @colorBlackAlpha1 !important;
  border-radius: @borderRadiusMain !important;
  min-width: 220px !important;

  .menu-item-collapse {
    a {
      padding-left: 30px !important;
    }
  }
}

/*面包屑*/
.el-breadcrumb {
  font-size: @sizeMain !important;
}

/*去掉下拉框的小尖角*/
.el-popper[x-placement^=bottom] .popper__arrow {
  display: none;
}

/*下拉框DIV与输入框的间距*/
.el-popper[x-placement^=bottom] {
  margin-top: 0 !important;
}

/*el-tooltip样式*/
.el-tooltip__popper.is-dark {
  background: @colorGray20 !important;
  opacity: 0.9;
}

/*el-table样式*/
.el-table::before {
  height: 0 !important;
}

.el-table {
  width: 100%;
  background: white;
  border: 1px solid @colorGray96 !important;
  border-radius: @borderRadiusSecond;

  th {
    user-select: auto !important;
  }

  tr {
    background: white;
  }

  td, th.is-leaf {
    font-size: @sizeMain;
    color: @colorGray10;
    text-align: center !important;
    padding: @paddingSecond 0 !important;
    border-bottom: 1px solid @colorGray96 !important;
  }

  th.is-leaf {
    height: 56px;
    font-size: @sizeMain;
    color: @colorGray10;
  }

  .cell {
    padding-left: @paddingMain !important;
    line-height: 20px !important;
    text-overflow: unset !important;
    white-space: nowrap !important;
  }

  .el-table__append-wrapper {
    height: 100%;
  }

  .el-table__fixed-right::before, .el-table__fixed::before {
    display: none !important;
  }

  .operation-btn {
    margin-right: 20px;
    font-size: @sizeMain !important;
    color: @colorGray10;
  }

  .operation-btn:focus, .operation-btn:hover {
    color: @colorGray10 !important;
  }
}

.el-table--border {
  th, td {
    border-right: 1px solid @colorGray96 !important;
  }
}

.el-table--border::after {
  display: none !important;
}

/* pagination 居中显示 */
.el-pagination {
  text-align: center;
}

/*多选 select/cascader tag 样式*/
.el-select__tags, .el-cascader__tags {
  .el-tag.el-tag--info {
    color: @colorGray20 !important;
    font-weight: normal !important;

    .el-tag__close:hover {
      background: @colorGray20 !important;
    }
  }
}

/*el-select_tags*/
.el-select__tags {
  flex-wrap: nowrap !important;
  .el-tag {
    max-width: 130px !important;
    margin-left: 2px !important;
  }
  .el-tag--info {
    background-color: @colorInfo !important;
  }
  .el-select__input {
    margin-left: 5px;
  }
}

/*审批流程下拉框*/
.approvalProcess {
  .el-select__tags, .el-cascader__tags {
    .el-tag.el-tag--info {
      max-width: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

/*下拉框的行高*/
.el-select-dropdown__item {
  height: 40px !important;
  line-height: 40px !important;
}

/*下拉框的上下内间距*/
.el-select-dropdown__list {
  padding: 10px 0 !important;
}

/*下拉框的圆角*/
.el-select-dropdown {
  border-radius: @borderRadiusMain !important;
}

/*弹出框样式调整*/
.el-message-box {
  width: 500px !important;
  padding-bottom: 0 !important;
  border-radius: @borderRadiusMain !important;

  .el-message-box__header {
    // padding top 由30px改为15px 解决提示框title和关闭图表不在一条线上问题 ed 2020-11-10 16:17
    padding: 15px @paddingMain 0 @paddingMain;

    .el-message-box__headerbtn {
      .el-message-box__close {
        color: @colorGray40;
      }

      .el-message-box__close:hover {
        color: @colorPrimary;
      }
    }
  }

  .el-message-box__content {
    padding: @paddingSecond @paddingMain;
  }

  .el-message-box__title {
    font-size: @sizeMedium !important;
    font-weight: bold;
  }

  .el-message-box__message p {
    font-size: @sizeMain;
    color: @colorGray40;
  }

  .el-message-box__btns {
    padding: @paddingMain;

    .el-button {
      padding: @paddingRegular @paddingLarge !important;
      font-size: @sizeMain !important;
    }

  }

}

/*文件上传*/
.el-upload {
  .el-upload__input {
    display: none !important;
  }

  .el-upload-dragger {
    background: @colorWhite;
    border: 1px dashed @colorGray70 !important;
    border-radius: @borderRadiusMain !important;
    height: 120px !important;
    padding-left: 50px;
    padding-right: 50px;
    width: auto !important;

    .el-icon-upload {
      margin: 15px 0 0 0 !important;
    }
  }
}

.el-upload-list {
  /*文件列表不需要动画*/

  .el-upload-list__item {
    transition: none !important;
  }

  .el-upload-list__item-name:hover {
    color: @colorPrimary;
    cursor: pointer;
  }
}

.el-upload__tip {
  line-height: 30px;
}

/*card 样式更改*/
.el-card__body {
  //padding: 25px 40px 25px 40px !important;
}

/*下拉框的箭头*/
.el-icon-arrow-up:before {
  //content: "" !important;
}

.el-icon-arrow-up {
  //width: 10px !important;
  //height: 8px !important;
  //border-width: 7px;
  //border-color: @colorGray90;
  //border-top-width: 0;
  //border-style: dashed;
  //border-bottom-style: solid;
  //border-left-color: transparent;
  //border-right-color: transparent;
  //right: 10px;
  //top: 40%;
  //position: absolute;
}

/*页头的icon修改*/
.el-icon-back:before {
  content: "\e6de" !important;
}

/*el-tree checkbox 样式*/
.el-tree-node__content > label.el-checkbox {
  margin-bottom: 0;
}

/*el-divider背景颜色*/
.el-divider, .el-divider--horizontal {
  background: @colorGray90 !important;
  margin: 0 !important;
}

.el-divider--vertical {
  width: 2px !important;
  height: 20px;
}

/*下拉框 dropdown 样式*/
.el-dropdown-menu {
  background: @colorWhite;
  box-shadow: 0 8px 20px 0 @colorBlackAlpha2 !important;
  border-radius: @borderRadiusMain !important;
  min-width: 172px;

  .el-dropdown-menu__item {
    font-size: @sizeSecond;
    color: @colorGray40;
    letter-spacing: 0;
    line-height: 40px;
  }

  .el-dropdown-menu__item:hover {
    background: @colorGray96 !important;
    color: @colorPrimary
  }
}

.el-select-dropdown {
  .el-select-dropdown__item:hover {
    color: @colorPrimary !important;
  }
}

/*弹框dialog样式*/
.el-dialog {
  .el-dialog__header {

    .el-dialog__title {
      color: @colorGray10 !important;
      font-size: @sizeMedium;
      font-weight: bold;
    }

    .el-dialog__headerbtn {
      .el-dialog__close {
        color: @colorGray60;
      }

      .el-dialog__close:hover {
        color: @colorPrimary;
        font-size: @sizeMedium;
        font-weight: bold;
      }
    }
  }

  .el-dialog__body {
    padding: @paddingMain !important;
  }
}

.el-drawer {
  overflow-y: auto !important;
}

/*el-form label 字体样式*/
.el-form {
  .el-form-item {
    .el-form-item__label {
      color: @colorGray10 !important;
      font-size: @sizeMain !important;
      font-weight: normal !important;
      padding-right: @paddingSmall !important;
    }
  }
}

/*鼠标悬浮变成手*/
.tree-hover:hover {
  cursor: pointer;
  background-color: @colorWhite;
}

.el-slider__marks-text {
  font-size: @sizeSecond !important;
}

/*el-input-group*/
.el-input-group {
  .el-input-group__prepend {
    background-color: @colorWhite;
    border-top-left-radius: @borderRadiusMain;
    border-bottom-left-radius: @borderRadiusMain;
  }

  .el-input__inner {
    border-top-right-radius: @borderRadiusMain;
    border-top-left-radius: 0 !important;
    border-bottom-right-radius: @borderRadiusMain;
    border-bottom-left-radius: 0 !important;
  }
}

/*el-tag*/
.el-tag {
  font-size: @sizeSecond !important;
  font-weight: bold !important;
}

/*el-transfer*/
.el-transfer {
  .el-transfer-panel {
    width: 250px;

    .el-checkbox__label {
      font-size: @sizeMain !important;
    }

    .el-transfer-panel__body {
      height: 300px;

      .el-transfer-panel__list {
        height: 80% !important;
      }
    }
  }

  .el-transfer__buttons {
    padding: 0 @paddingRegular !important;

    .el-button {
      display: block;
      padding: @paddingRegular @paddingMini !important;
      margin: 0 0 5px 0 !important;

      span {
        margin-left: 5px;
        margin-right: 5px;
      }
    }
  }
}

/*el-tabs*/
.el-tabs {
  .el-tabs__item {
    color: @colorGray60;
  }

  .el-tabs__item.is-active, .el-tabs__item:hover {
    font-weight: bold;
    color: @colorPrimary;
  }

  .el-tabs__nav-wrap::after {
    height: 1px;
    background: @colorBlackAlpha1;
  }

  .table-container {
    padding-top: 0 !important;
  }

}

.el-tabs--border-card {
  box-shadow: none !important;
}

/*el-image*/
.el-image {
  .el-image-viewer__wrapper {
    i {
      cursor: pointer;
      color: @colorWhite !important;
    }

    i:hover {
      color: @colorPrimary !important;
    }
  }
}

.el-collapse {
  border: none !important;
  .el-collapse-item__content {
    font-size: 14px !important;
  }
}
